/*
* @Author: yanyanru
* @Date: 2018/4/11
* @description: 职业履历
*/
<template>
    <div class="custom-box p-20">
        <div class="custom-title">
            <h3>职业履历</h3>
            <div class="pull-left m-l-20">
                <button type="button" class="custom-btn custom-btn-round" @click="addCareer"><i class="fa fa-plus"></i></button>
            </div>
        </div>
        <el-row class="align-center handleTitle">
            <el-col :span="2">ID</el-col>
            <el-col :span="3">企业名称</el-col>
            <el-col :span="3">公司属性</el-col>
            <el-col :span="2">职务</el-col>
            <el-col :span="3">级别</el-col>
            <el-col :span="2">是否离职</el-col>
            <el-col :span="3">入职时间</el-col>
            <el-col :span="3">离职时间</el-col>
            <el-col :span="3">操作</el-col>  
        </el-row> 
        <draggable @end="drag" :options="options" style="max-height:300px;overflow-y: scroll;">
            <el-row class="ca-align-center ca-leng-38" v-for="item in tableData" :key="item.mid" :class="dragClassCursor">
              <!-- <el-col :span="2" v-show="false"><span>{{item.id}}</span></el-col> -->
                <el-col :span="2" class="align-center line-h-40">
                    <span v-if="!item.id">-</span>
                    <!-- <el-tooltip effect="light" :content="item.id" placement="top" v-if="item.id">
                        <span class="wordWrap">{{item.id}}</span>
                    </el-tooltip> -->
                    <span class="wordWrap">{{item.id}}</span>
                </el-col>
                <el-col :span="3" class="align-center line-h-40">
                    <span v-if="!item.companyName">-</span>
                    <!-- <el-tooltip effect="light" :content="item.companyName" placement="top" v-if="item.companyName">
                        <span class="wordWrap">{{item.companyName}}</span>
                    </el-tooltip> -->
                    <span class="wordWrap">{{item.companyName}}</span>
                </el-col>
                <el-col :span="3" class="align-center line-h-40">
                    {{item.businessType | getNameById('companyIdentity')}}
                </el-col>
                <el-col :span="2" class="align-center line-h-40">
                    <span v-if="!item.title">-</span>
                    <el-tooltip effect="light" :content="item.title" placement="top" v-if="item.title">
                        <span class="wordWrap">{{item.title}}</span>
                    </el-tooltip>
                </el-col>
                <el-col :span="3" class="align-center line-h-40">
                    <span v-if="!item.level">-</span>
                    <span v-if="item.level">{{item.level | getNameById("personTeamLevel")}}</span>
                </el-col>
                <el-col :span="2" class="align-center line-h-40">
                    <span v-if="!item.dimissionType">-</span>
                    <span v-if="item.dimissionType">{{item.dimissionType | getNameById('whether')}}</span>
                </el-col>
                <el-col :span="3" class="align-center line-h-40">
                    <span v-if="!item.entryTime">-</span>
                    <span v-if="item.entryTime">{{item.entryTime | cmsMoment}}</span>
                </el-col>
                <el-col :span="3" class="align-center line-h-40">
                    <span v-if="!item.dimissionTime">-</span>
                    <span v-if="item.dimissionTime">{{item.dimissionTime | cmsMoment}}</span>
                </el-col>
                <el-col :span="3" class="align-center line-h-40">
                    <el-button type="text" @click='edit(item.id)'>编辑</el-button>  
                </el-col>  
            </el-row>
        </draggable> 
        <el-dialog title="职业履历" :visible.sync="outerVisible">
            <el-form labelWidth="100px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="企业名称" required>
                            <el-input v-model="companyOpenSearch.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="m-t-3" :offset="1">
                        <el-select v-model="companyOpenSearch.searchType">
                            <el-option v-for="item in openSearchNameType"
                              :key="item.dictValue"
                              :value="item.dictValue"
                              :label="item.dictName"
                            ></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5" :offset="1" class="m-t-3">
                        <el-button type="primary" @click="search">搜索</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="身份标识">
                            <el-select v-model="comManager.businessType">
                                <el-option v-for='item in companyIdentityArr'
                                            :key='item.dictValue'
                                            :value='item.dictValue'
                                            :label="item.dictName" >
                                  </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="职务">
                          <el-autocomplete
                            class="inline-input"
                            v-model="comManager.title"
                            :fetch-suggestions="querySearch"
                            placeholder="支持模糊搜索"
                            :trigger-on-focus="false"
                            @select="handleSelect"
                            suffix-icon="el-icon-search"
                          ></el-autocomplete>
                        <!-- <el-input v-model="comManager.title" slot="append" icon="el-icon-search" @click="searchPosition"></el-input> -->
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="是否离职">
                            <el-select v-model="comManager.dimissionType">
                                <el-option v-for="item in whether"
                                      :key='item.dictValue'
                                      :value='item.dictValue-0'
                                      :label="item.dictName"
                                ></el-option>
                            </el-select>
                          </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="级别">
                            <el-select v-model="comManager.level">
                                <el-option v-for="item in personTeamLevel"
                                      :key='item.dictValue'
                                      :value='item.dictValue-0'
                                      :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="入职时间">
                            <el-date-picker
                              type="date"
                              v-model="comManager.entryTime"
                              placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="离职时间">
                            <el-date-picker
                              type="date"
                              :disabled="comManager.dimissionType == 2"
                              v-model="comManager.dimissionTime"
                              placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <el-row>
                    <el-col :span="23">
                        <el-form-item label="备注" >
                            <el-input type="textarea" :rows="4" v-model="comManager.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-dialog
              :visible.sync="innerVisible"
              append-to-body>
              <el-table :data="searchData" @row-click="selectCompany">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="fullName" label="企业名称"></el-table-column>
                <el-table-column prop="intFullName" label="国际化名称"></el-table-column>
                <el-table-column prop="shortName" label="企业简称"></el-table-column>
                <el-table-column prop="orgCode" label="组织机构代码"></el-table-column>
                <el-table-column prop="onceName" label="曾用名">
                </el-table-column>
              </el-table>
              <el-pagination
                layout="prev, pager, next"
                :total="totalCount">
              </el-pagination>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveCareerPortfolio" round>保存</el-button>
                <el-button @click="outerVisible = false" round>取 消</el-button>
            </div>
        </el-dialog>  
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import draggable from 'vuedraggable';
import { Component, Watch } from 'vue-property-decorator';
import { ComManagerDto, CompanyOpenSearchVO, DictionariesDataVo, } from '../../../../api/Interface';
import PersonService from '../../../../service/subject/person';
import CommonService from '../../../../service/common/index';
import { SearchDto, } from '../../../../service/subject/person/personInterface';
import { CompanySearch, } from '../../../../service/common/interface';
@Component({
  components: { 
    draggable
  }
})

export default class CompanyList extends Vue {
    // 初始化数据 相当于data
    public comManager: ComManagerDto = {} as ComManagerDto; // <ComManagerDto> {}
    public companyOpenSearch: CompanySearch = {} as CompanySearch; // 搜索
    public value: string = ' ';
    public quality: object[] = this.$store.state.csConst.checkType;
    public companyIdentity: DictionariesDataVo[] = this.$store.state.user.dictionary.dicList.companyIdentity; // 身份标识
    public personTeamLevel: object[] = this.$store.state.user.dictionary.dicList.personTeamLevel; // 级别
    public whether: object[] = this.$store.state.user.dictionary.dicList.whether; // 级别
    public openSearchNameType: object[] = this.$store.state.user.dictionary.dicList.openSearchNameType; // 搜索
    public searchParam: object[] = []; // 搜索的参数
    public totalCount: number = 100; // 总数据条数
    public outerVisible: boolean = false;
    public innerVisible: boolean = false;
    public tableData: object[] = []; // 列表的数据
    public options: object = {};
    public dragClassCursor: string = '';
    public name: string = '撒打算';
    public searchData: object[] = []; // 搜索的数组
    public companyIdentityArr: object[] = []; // 身份标识
    public sortList: any[] = []; // 排序数据
    public sortListArr: number[] = []; // 排序参数
    // refs
    public $refs: { };
    // watch
    @Watch('value')
    public onChildChanged(val: string, oldVal: string) {
        return val + '***';
    }
    // 声明周期钩子
    public mounted() {
        this.options = {
            'dragClass': 'dragClass',
            'ghostClass': 'ghostClass',
            'chosenClass': 'sortable-chosen'
        };
        this.dragClassCursor = 'dragClassCursor';
    }
    public created() {
        if ( this.$route.params.id !== '-1') {
            this.getCaneerList(this.$route.params.id);
        } else {
            this.getMessage();
        }
    }
    // 保存职业履历  ok
    public async saveCareerPortfolio() {
        if (!this.comManager.level) {
            this.$message.warning('级别不能为空!');
            return;
        } 
        if (this.comManager.dimissionType === 2) {
            this.comManager.dimissionTime = '';
        }
        this.comManager.personId = Number(this.$route.params.id);
        const { resCode } = await PersonService.saveCareer(this.comManager);
        if (resCode === '0') {
            this.$message.success('保存成功');
            this.outerVisible = false;
            this.getCaneerList(this.$route.params.id);
        }
    }
    public addCareer() {
        this.outerVisible = true;
        this.companyOpenSearch = {} as CompanySearch; 
        this.comManager = {} as ComManagerDto;
    }
    // 搜索按钮
    public async search() {
        if (!this.companyOpenSearch.name) {
            this.$message.warning('请输入企业名称!');
        } else if (!this.companyOpenSearch.searchType) {
            this.$message.warning('请选择搜索类型!');
        } else {
            this.innerVisible = true;
            this.companyOpenSearch.attribute = 1; // 默认企业 
            this.companyOpenSearch['pageParam.pageIndex'] = 1;
            this.companyOpenSearch['pageParam.pageSize'] = 10;
            const res = await CommonService.getCompanySearch(this.companyOpenSearch);
            this.searchData = res.data.resultData;
            this.totalCount = res.data.totalCount; // 分页返回的总数据
        }
    }
  // 模糊搜索
  public async querySearch(queryString: string, cb: any) {
      if (queryString.trim().replace(/\s/g, '') !== '') {
          let results: SearchDto[] = [];
          const res = await PersonService.getPersonPosition(queryString);
          if (res.resCode === '0') {
              results = res.data.map(item => {
                  item.value = item.title;
                  item.id = item.id;
                  return {value: item.title, id: item.id, level: item.level};
              });
              cb(results);
          }
      }
  }
  public handleSelect(item: SearchDto) {
      this.comManager.title = item.value;
      this.comManager.titleId = item.id;
      this.comManager.level = item.level;
  }
  public getMessage() {
      this.value = 'hahahh';
  }
  // 获取职业履历列表
  public async getCaneerList(id: string) {
      const res = await PersonService.getCaneerList(id);
      this.tableData = res.data;
  }
  // 点击一行选中公司
  public selectCompany(row: CompanyOpenSearchVO) {
      this.innerVisible = false;
      this.companyOpenSearch.name = row.fullName;  
      this.comManager.companyId = row.id; // 保存工商id
      const arr = row.attributeStatus.split('|');
      arr.splice(0, 1);
      arr.splice(arr.length - 1, 1);
      arr.map(item => {
          this.companyIdentity.map( v => {
              if (v.dictValue === item) {
                  this.companyIdentityArr.push({
                    dictName: v.dictName,
                    dictValue: v.dictValue,
                  });
              }
          });
      });   
  }
  public drag(val: any) {
      this.sortListArr = [];
      this.sortList = Array.from(val.target.children);
      this.sortList.map((item, index) => {
          this.sortListArr.push(Number(item.children[0].innerText));
      });
      this.saveOrder();
  }
  // 拖动排序
  public async saveOrder() {
      const { resCode } = await PersonService.personSort(this.sortListArr);
      if (resCode === '0') {
          this.$message.success('成功！');
      }
  }
  public edit(id: string) {
      this.$router.push({name: 'company-detail', params: {itemId: id}});
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.custom-title {
  height: 36px;
  overflow: hidden;
  h3 {
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    float: left;
  }
}
.handleTitle{
    font-weight:normal;
    line-height:42px;
    // background:#edf2fe;
    color:#333;
}
.handleTitle div{
    font-size:14px;
}
.m-t-3{
  margin-top: 3px;
}
// 拖动排序
.dragClassCursor{
    cursor: move;
}
 .dragClass{
      background: #ddd;
  }
  .ghostClass{
      opacity:0;
  }
  .sortable-chosen{
      background-color:#ddd;
  }
  .dragClassCursor{
      cursor: move;
  }
  .line-h-40{
    line-height: 40px;
  }
</style>
